<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>改进的工具提示行为</title>
		<style>
			body {
				height: 2000px;
				/* 在页面滚动后，工具提示也应该正常展示 */
			}

			.tooltip {
				position: fixed;
				z-index: 100;

				padding: 10px 20px;

				border: 1px solid #b3c9ce;
				border-radius: 4px;
				text-align: center;
				font: italic 14px/1.3 sans-serif;
				color: #333;
				background: #fff;
				box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
			}

			#house {
				margin-top: 50px;
				width: 400px;
				border: 1px solid brown;
			}

			#roof {
				width: 0;
				height: 0;
				border-left: 200px solid transparent;
				border-right: 200px solid transparent;
				border-bottom: 20px solid brown;
				margin-top: -20px;
			}

			p {
				text-align: justify;
				margin: 10px 3px;
			}
		</style>
	</head>
	<body>
		<div data-tooltip="这是房子的内部" id="house">
			<div data-tooltip="这里是屋顶" id="roof"></div>

			<p>从前有一个猪妈妈，她养了三只小猪。</p>

			<p>
				三只小猪长得很快快，妈妈对它们说：“你们太大了，不能住在这里了，你们自己去盖房子吧，但要小心不要让狼抓到你们。”
			</p>

			<p>三只小猪出发了。 “我们会注意不要让狼抓住我们，”他们说。</p>

			<p>
				很快，它们遇到了一个男人。
				<a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="继续阅读..."> 鼠标悬浮在我上 </a>
			</p>
		</div>

		<script>
			const house = document.querySelector('#house')

			// 鼠标移入
			house.addEventListener('mouseover', (e) => {
				let currentEl = e.target
				let tooltip = currentEl.dataset.tooltip

				if (!tooltip) {
					currentEl = currentEl.closest('#house')
					tooltip = currentEl.dataset.tooltip
				}

				const rect = currentEl.getBoundingClientRect()

				// 创建 tooltip
				createdDiv(rect, tooltip)
			})

			// 鼠标移出
			document.addEventListener('mouseout', (e) => {
				const tooltip = document.querySelector('.tooltip')
				if (!tooltip) return
				tooltip.remove()
			})

			function createdDiv(rect, tooltip) {
				const div = document.createElement('div')
				div.classList.add('tooltip')
				div.textContent = tooltip
				document.body.append(div)
				const divRect = div.getBoundingClientRect()

				const left = rect.left + rect.width / 2 - divRect.width / 2
				const top = rect.top - 5 > divRect.height ? rect.top - divRect.height - 5 : rect.top + rect.height + 5

				div.style.top = top + 'px'
				div.style.left = left + 'px'
			}
		</script>
	</body>
</html>
